<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<link rel="stylesheet" href="css/jquery-ui.min.css" />
		<link rel="stylesheet" href="css/chosen.css"  /> 
		<script type="text/javascript" src="js/jquery-ui.min.js"></script>
		<script type="text/javascript" src="js/jq-extends.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="css/chosen.jquery.js" ></script>
		<script type="text/javascript" src="js/nojs.js"></script>
		<script>
			$(function(){
				var checkboxBinding = {
					selector: "[data-member]",
					$member: function($leader, context){//获取成员
						var memberName = $leader.data("member");//成员name
						return $("input:checkbox[name=" + memberName + "]:not(:disabled)", context);
					},
					$relate: function($leader, $member, context){//相关操作按钮是否可操作
						var memberName = $leader.data("member");//成员name
						var $relate = $("[data-checkbox-required=" + memberName + "]", context)
						if($relate.length !== 0) {
							$relate.prop("disabled", $member.filter(":checked").length ===0);
						}
					},
					init : function(context){
						var module = this;
						$(this.selector, context).each(function(){
							var $leader = $(this);
							var $member = module.$member($leader, context);
							$leader.change(function(){//点击全选或者取消
								$member.prop("checked", $leader.prop("checked"));
								module.$relate($leader, $member, context);
							});
							$member.change(function(){//点击成员 若全选则全选checkbox选中
								$leader.prop("checked", $member.length == $member.filter(":checked").length);
								module.$relate($leader, $member, context);
							});
							module.$relate($leader, $member, context);
						});
					}
				}.init(document);
			});
		
		</script>
	</head>

	<body>

		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="form-group">
						<label class="col-sm-2 control-label" for="type">类型</label>
						<div class="col-md-8" id="type">
							<select class="form-control chosen" >
								<option value="1">type1</option>
								<option value="2">type2</option>
								<option value="3">type3</option>
							</select>
							<select class="form-control chosen"  multiple="multiple" data-max_selected_options ="2" >
								<option value="1">type2</option>
								<option value="2">type3</option>
								<option value="3">type4</option>
							</select>
						</div>
						<div class="col-sm-2 help-inline form-control-static"></div>
					</div>
				</div>				
			</div>
			<div class="row clearfix">
				<div class="col-md-12 column">
					<div class="btn-group">
						<button class="btn btn-sm btn-info" data-checkbox-required="ids">批量删除</button>
						
					</div>
					<table class="table table-striped table-bordered">
						<tr>
							<th><input type="checkbox" data-member="ids" /></th>
							<th>姓名</th>
							<th>年龄</th>
							<th>备注</th>
						</tr>
						<tr>
							<td><input type="checkbox" name="ids" value="1"/></td>
							<td>张三</td>
							<td>32/td>
							<td>张三123</td>
						</tr>
						<tr>
							<td><input type="checkbox" name="ids" value="2"/></td>
							<td>李四</td>
							<td>22/td>
							<td>李四123</td>
						</tr>
						<tr>
							<td><input type="checkbox" name="ids" value="3"/></td>
							<td>王五</td>
							<td>12/td>
							<td>王五123</td>
						</tr>
					</table>
					
					<div class="btn-group">
						<button class="btn btn-sm btn-info" data-checkbox-required="pks">批量xx</button>
						
					</div>
					<table class="table table-striped table-bordered">
						<tr>
							<th><input type="checkbox" data-member="pks" /></th>
							<th>姓名</th>
							<th>年龄</th>
							<th>备注</th>
						</tr>
						<tr>
							<td><input type="checkbox" name="pks" value="1"/></td>
							<td>张三</td>
							<td>32/td>
							<td>张三123</td>
						</tr>
						<tr>
							<td><input type="checkbox" name="pks" value="2"/></td>
							<td>李四</td>
							<td>22/td>
							<td>李四123</td>
						</tr>
						<tr>
							<td><input type="checkbox" name="pks" value="3"/></td>
							<td>王五</td>
							<td>12/td>
							<td>王五123</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</body>

</html>